/*
  学习目标：props的俩个特点
  步骤：
    1. props可以传递任意数据类型
      number string boolean null undefined object arr
      🔔 function  🔔 JSX
    2. props是只读的 - 类似vue中的单项数据流
*/
// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  render() {
    return (
      <div>
        <h3>我是父组件</h3>
        <Child name="悟空" age={18} gender={'男'}></Child>
        <Child boolean1={true} null1={null} undefined1={undefined}></Child>
        <Child arr={[1, 2, 3, 4, 5]}></Child>
        <Child obj={{ name: '马云', age: 18 }}></Child>
        {/* <Child fn={() => alert('我是传递给子组件的方法')}></Child> */}
        {/* <Child jsx={<div>我是jsx</div>}></Child> */}
      </div>
    );
  }
}

// 函数组件-通过形参接受props接收
function Child({ fn, jsx }) {
  console.log('fn----->', fn);
  return (
    <div>
      <h3>我是子组件</h3>
      <div>{props.name}</div>
      <div>{props.age}</div>
      <div>{String(props.boolean1)}</div>
      <div>{String(props.null1)}</div>
      <div>{String(props.undefined1)}</div>
      <div>{props.arr}</div>
      <div>{JSON.stringify(props.obj)}</div>
      {/* 注意不要调用，只需要把函数放到onClick中即可 */}
      {/* <button onClick={fn}>点我</button>
      <div>{jsx}</div> */}
    </div>
  );
}

// // 类组件接收是通过：this.props来接收
// class Child2 extends React.Component {
//   render() {
//     console.log('this----->', this);
//     return (
//       <div>
//         <h3>我是子组件2</h3>
//         <div>{this.props.name}</div>
//         <div>{this.props.age}</div>
//       </div>
//     );
//   }
// }

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
